.rotation{
    width: 100%;
    height: 200px;
    background-color: pink;
}
.main{
    width: 100%;
    overflow: scroll;
    // 排名与打卡
    .rank-and-clock-in{
        padding: 0 10px;
        justify-content: space-between;
        // 今日排名
        .rank{
            width: 40%;
            height: 120px;
            border-radius: 15px;
            background-color: rgba(21, 146, 204,.6);
            background-image: url('../img/index-card-rank.png');
            background-repeat: no-repeat;
            background-size: 90px 90px;
            background-position: left 20px;
        // 文字
        .rank-text{
            top: 5px;
            left: 10px;
            font-size: 20px;
            color: rgb(0, 81, 119);
            font-weight: bold;
    }
        .rank-num{
            color: white;
            font-size: 55px;
            text-align: right;
            font-weight: 500;
            bottom: 10px;
            right: 10px;
    }
        }
        // 打卡
        .punch{
            width: 55%;
            height: 120px;
            border-radius: 15px;
            background-color: rgb(123, 203, 245,.6);
            background-image: url('../img/index-card-sum.png');
            background-repeat: no-repeat;
            background-size: 90px 90px;
            background-position: 10px 20px;
            // 文字
        .punch-all{
            top: 10px;
            left: 15px;
            font-size: 18px;
            color: rgb(0, 81, 119);
            font-weight: 600;
    }
        .punch-btn{
            width: 100px;
            height: 40px;
            text-align: center;
            line-height: 30px;
            border: 3px solid rgb(0, 81, 119);
            border-radius: 20px;
            color: rgb(0, 81, 119);
            font-size: 16px;
            bottom: 10px;
            right: 10px;
            }
        }
    }

    // 运动数据与徽章
    .data-and-badges{
        padding: 0 10px;
        justify-content: space-between;
        // 运动数据
        .motion-data{
            width: 48%;
            height: 110px;
            border-radius: 15px;
            background-image: url('../img/index-card-data.png');
            background-repeat: no-repeat;
            background-size: 100%;
            .motion-text{
            color: white;
            top: 10px;
            left: 15px;
            }
        }
        // 徽章
        .badge{
            width: 46%;
            height: 110px;
            border-radius: 15px;
            background-color: rgba(128, 176, 231, 0.6);
            background-image: url('../img/index-card-badge.png');
            background-repeat: no-repeat;
            background-size: 90px 90px;
            background-position: 5px bottom;
        // 文字
        .badge-text{
            top: 10px;
            left: 15px;
            font-size: 16px;
            color: rgb(0, 81, 119);
            font-weight: 600;
    }
        .badge-num{
            bottom: 0;
            right: 15px;
            color: rgb(0, 81, 119);
            font-size: 18px;
            font-weight: bold;
            .badge-number{
                font-size: 80px;
                font-weight: bold;
            }
            }
        }
    }
    // 课程训练
    .course-train{
        width: 95%;
        height: 110px;
        margin: 20px 10px 0 10px;
        border-radius: 15px;
        background-image: url('../img/index-swiper-bg2.jpg');
        background-repeat: no-repeat;
        background-size: 100%;
        .course-text{
            top: 10px;
            left: 15px;
            color: white;
            font-weight: bold;
        }
    }
    // 户外跑步
    .outdoor-run{
        width: 95%;
        height: 110px;
        margin: 20px 10px;
        border-radius: 15px;
        background-image: url('../img/course-img02.png');
        background-repeat: no-repeat;
        background-size: 100%;
        .outdoor-text{
            top: 10px;
            left: 15px;
            color: white;
            font-weight: bold;
        }
    }
}
// 轮播图
.swiper-container {
    height: 200px;
}
.swiper-container img {
    width: 100%;
    height: 200px;
}

// 提示框
.toast{
    color: white;
    .iconfont{
        color: rgb(255, 0, 64);
        font-size: 30px;
    }
}



